<template>
	<view class="content">
		<view class="container">
		   <!-- <my-addres></my-addres> -->
		   <!-- 地址 -->
		 
		<!--   <view class="site" @click="goAddress">
		   	<view class="site-name">
		   		<view class="site-name1">{{addres.name}}</view>
		   		<view class="site-name2">{{addres.phone}}</view>
		   	</view>
		   	<view class="site-content">
		   		<view class="site-content-icon">
		   			<image src="../../../static/indet/indet4.png" mode=""></image>
		   		</view>
		   		<view class="site-content-site"> -->
		   			<!-- 山东省济南市先行区王大佬庄183号无名氏街道蛋蛋花园一号楼12单元1128 -->
			<!-- 		{{addres.dizhi}}
		   		</view>
		   		<view class="site-content-icon2">
		   			<image src="../../../static/indet/indet6.png" mode=""></image>
		   		</view>
		   	</view>
		   </view> -->
			<!-- <view class="" :tobBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap">
			 	<button type="default">点击</button>
			 </view> -->
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options" @click="">
					 <car-list ref="mycar" :carList="carList" @allSelBtn="allSelBtn" @selShop="selShop" @selGoods="selGoods" @jsbtn="jsbtn" @delbtn="delbtn" @changeNum="changeNum"></car-list>
				</uni-swipe-action-item>
			</uni-swipe-action>
		 </view>
	</view>
	  
</template>

  <script>
    import carList from '../../../components/car-list/car-list.vue'
	import swiperTabHead from '../../commodity-details/address.vue'
    export default {
        components:{
            carList,
			swiperTabHead
        },
        data() {
            return {
				numberValue:'',//购物车点击数量
				houColor:'',// 规格型号颜色
				// 地址栏
				addres:'',
                maskTitle:'',
                carList:[
                    {   
						commodityId:'',// 购物车详情id
						num:'',// 商品数量
                        shopId: 1,
                        title: "山东碉堡建设制造二分厂",
						// image:'../../../static/home/title-img1.png',
						img:'',
                        total: 2,
                        goodsAmount: 6051,
                        selected:true,
                        glist:[
                            {
                                id: 236,
                                gid: 47,
                                name: "Apple iPhone 12 Pro Max 256GB",
                                img: '../../../static/home/gz-imgs21.png',
                                gsId: 72,
                                spec_key_name: "已选 海蓝色| 256GB 公开版 1件",
                                spec: [{name: "Apple iPhone", value: "iPhone 12 Pro Max 256GB"}, {name: "颜色", value: "海蓝色"}],
                                price: 40,
                                number: 1,
                                stock: 193,
                                selected:true,
                            },
                            {
                                id: 237,
                                gid: 45,
                                name: "盆栽",
                                img: "../../../static/home/ss-imgs2.png",
                                gsId: 65,
                               spec_key_name: "已选 海蓝色| 256GB 公开版 1件",
                               spec: [{name: "Apple iPhone", value: "iPhone 12 Pro Max 256GB"}, {name: "颜色", value: "海蓝色"}],
                                price: 60,
                                number: 1,
                                stock: 77,
                                selected:true,
                            }
                        ]
                    },
                    {
                        shopId: 2,
                        title: "山东碉堡建设制造二分厂",
                        total: 11,
                        selected:true,
                        goodsAmount: 6051,
                        glist:[
                            {
                                id: 188,
                                gid: 31,
                                name: "橘子",
                                img: '../../../static/home/ss-imgs1.png',
                                gsId: 50,
                               spec_key_name: "已选 海蓝色| 256GB 公开版 1件",
                               spec: [{name: "Apple iPhone", value: "iPhone 12 Pro Max 256GB"}, {name: "颜色", value: "海蓝色"}],
                                price: 3,
                                number: 10,
                                stock: 78,
                                selected:true,
                            },
                            {
                                id: 235,
                                gid: 35,
                                name: "积分购买测试",
                                img: "../../../static/home/ss-imgs2.png",
                                gsId: 56,
                               spec_key_name: "已选 海蓝色| 256GB 公开版 1件",
                               spec: [{name: "Apple iPhone", value: "iPhone 12 Pro Max 256GB"}, {name: "颜色", value: "海蓝色"}],
                                price: 1,
                                number: 1,
                                stock: 97,
                                selected:true,
                            }
                        ]
                    }
                ],
				options: [{
					text: '删除',
					style: {
						background: '#c00000'
					}
				}]
            }
        },
        onLoad(options) {
			this.clickNumber()
			 this.numberValue = options.numberValue
			 this.houColor = options.houColor
				  if(options.index !== '') {
					  var data2 = JSON.parse(options.index);// 字符串转对象
					    this.addres = data2
				  }
			
        },
    
        methods: {
			// 商品规格列表
			clickNumber() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mallOrders/getCartList',
					header: {
						'token': uni.getStorageSync('token')
					},
					// data: {
					// 	commodityId: that.commodityId
					// },
					afterAjax: (res) => {
						console.log(res, '新增规格列表*接口')
						if (res.code !== 200) {
							console.log(res.data, '新增*规格列表接口错误')
						}
						if (res.code == 200) {
							console.log(that.guige,'新增规格列表通了')
						}
					}
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '../../commodity-details/address?name='+1
				})
			},
            confirm:function(){//确定按钮
                console.log('您点击了确定按钮');
				
            },
            cancel:function(){//取消按钮
                console.log('您点击了取消按钮');
				
            },
            selGoods:function(carList){
                var that = this;
                that.carList = carList;
            },
            selShop:function(carList){
                var that = this;
                that.carList = carList;
            },
            allSelBtn:function(carList){
                var that = this;
                that.carList = carList;
            },
            jsbtn:function(ids){//结算按钮
                var that = this;
                console.log(ids);
                var that = this;
				console.log(that);
				uni.navigateTo({
					url: 'submit'
				})
                /* 
                 跳转结算页面

                */
			 
            },
            delbtn:function(ids,list){//删除按钮
                var that = this;
                /* 
                 请求接口数据

                */
                for (let i = 0; i < list.length; i++) {
                    for (let k = 0; k < list[i].glist.length; k++) {
                        if (list[i].glist[k].selected == true) {
                            list[i].glist.splice(k,1);
                            k--
                        }
                    }
                    if(list[i].glist.length==0){//若当前店铺商品删除完，删除当前店铺
                        list.splice(i,1);
                        i--
                    }
                }
                that.carList = list;

                that.$refs.mycar.getAllMount(list);//计算价格展示
            },
            changeNum:function(total,carList,shopIndex,gIndex,number,id,type){
                var that = this;
                /*  请求接口数据 */
                carList[shopIndex].glist[gIndex].number = number;
                if (type == 0) {
                    carList[shopIndex].total = total - 1;
                } else {
                    carList[shopIndex].total = total + 1;
                }
                that.carList = carList;
                that.$refs.mycar.getAllMount(carList);//计算价格展示
				that.carNumber()
            },
			// 修改购物车中商品数量
			carNumber() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mallOrders/updateCartNum',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						commodityId: that.commodityId,
						num:3
					},
					afterAjax: (res) => {
						console.log(res, '修改购物车中商品数量接口')
						if (res.code !== 200) {
							console.log(res.data, '修改购物车中商品数量错误')
						}
						if (res.code == 200) {
							console.log(that.guige,'修改购物车中商品数量通了')
						}
					}
				})
			}
        },
        onReachBottom() {

        },
        onShareAppMessage() {

        }
    }
  </script>

<style lang="scss">
	.content {
	width: 722rpx;
page{
      background: #f5f5f5;
    }
    view,textarea,input,text,button{
      padding: 0;
      margin: 0;
      box-sizing:border-box;
      font-size: 28rpx;
      font-family: "微软雅黑";
    }
    .uni-checkbox-input{
        border-radius: 50% !important;
    }
    .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        background: #f5f5f5;
        overflow: hidden;
    }
    // .line1{
    //     overflow: hidden;
    //     text-overflow: ellipsis;
    //     display: box;
    //     display: -webkit-box;
    //     line-clamp: 1;
    //     box-orient: vertical;
    //     -webkit-line-clamp: 1;
    //     -webkit-box-orient: vertical;
    //     word-break: break-all; /* 英文换行问题 */
    // }
    .line2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        // display: -webkit-box;
        line-clamp: 2;
        box-orient: vertical;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all; /* 英文换行问题 */
    }
    .centerboth {
        display:flex;
        display: -webkit-flex;
        align-items:center;
        -webkit-align-items:center;
        justify-content: center;
        -webkit-justify-content: center;
    }
    .clearfix:after {
        content: "";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
    }

    .clearfix {
        zoom: 1;
    }
    image{
      padding: 0;
      margin: 0;
    }
    textarea {
      width:300rpx;
      height:75rpx;
      display:block;
      position:relative;
      font-size: 28rpx;
    }
    button::after{ border: none; }
    input:-ms-input-placeholder {
        color: #808080;
    }
    car-list{
        width: 100%;
    }
	// 地址信息
	.site {
		background-color: #FFFFFF;
		border-radius: 14rpx;
		margin: 25rpx;
		width: 699rpx;
		height: 166rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.site-name {
			display: flex;
			flex-direction: row;
			justify-content: space-left;
			margin: 27rpx 108rpx 9rpx 108rpx;
			.site-name1 {
				font-size: 28rpx;
				font-weight: 600;
			}
			.site-name2 {
				font-size: 21rpx;
				color: #626262;
				margin-left: 14rpx;
			}
		}
		.site-content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.site-content-icon {
				width: 65rpx;
				height: 65rpx;
				margin: 0 27rpx 25rpx  27rpx ;
				image {
					max-width: 100%;
					max-height: 100%;
				}
			}
			.site-content-site {
				font-size: 21rpx;
				color: #626262;
			}
			.site-content-icon2 {
				width: 18rpx;
				height: 25rpx;
				margin-right: 25rpx;
				image {
					max-width: 100%;
					max-height: 100%;
				}
			}
		}
	}
}

</style>
